'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { Button,Row, Col, Table, Alert } from 'antd';
import MainArea from '../../components/common/mainArea'
import { getUserRows } from '../../reducers/user/actions.js';
import './style.less';
class Screen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys:[]
        };
        this.props.getUserRows({});
    }

    render() {
        const { selectedRowKeys } = this.state;
        let {rows} = this.props.user;
        if(!rows.dataSource) return null;
        const rowSelection = {
            selectedRowKeys,
            onChange: ((selectedRowKeys)=>{
                this.setState({ selectedRowKeys });
            })
        };
        let talbeProps = {
            dataSource:rows.dataSource,
            columns:rows.columns.asMutable(),
            pagination:rows.pagination,
            rowSelection,
            onChange:(pagination, filters, sorter)=>{
                console.log({pagination, filters, sorter})
                this.props.getUserRows({pagination, filters, sorter});
            }
        };
        return (
            <MainArea title="用户列表">
                <div style={{ marginTop:16,marginBottom: 16 }}>
                    <Button type="primary"
                            style={{ marginRight: 8 }}
                            onClick={()=>{}}>
                        新加
                    </Button>
                    <Button type="primary"
                            onClick={()=>{}}
                            disabled={!(selectedRowKeys.length > 0)} >删除
                    </Button>
                    <span style={{ marginLeft: 8 }}>{selectedRowKeys.length > 0 ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>

                </div>
                <Table {...talbeProps } />
            </MainArea>
        )
    }
}

export default connect(
    state =>{
        return {
            common: state.common,
            user:state.user
        };
    },
    dispatch => {
        return {
            getUserRows: (data)=>{ dispatch( getUserRows(data) ) },
        }
    }
)(Screen);